<template>
	<view>
		<u-tabs :list="tabsList" :is-scroll="false" :current="tabIndex" @change="tabChange" active-color="#ff7104" inactive-color="#606266"></u-tabs>
		
		<view>
			<view class="items" v-if="dataList && dataList.length">
				<view class="item" v-for="(item, i) in dataList" :key="i">
					<view class="status flex">
						<view>流水号：{{ item.order_no }}</view>
					</view>
					<view class="status flex">
						<view class="name font-size-11">{{ '提现状态' }}</view>
						<view class="desc font-size-9" :style="{background:'#FF7104'}">{{ statusText[item.status] }}</view>
					</view>
					<view class="handling-fee flex" :style="{color:'#FF7104'}">
						<view class="name">{{ '扣除手续费' }}</view>
						<view class="fee" :style="{color:'#FF7104'}">-{{ (((item.price*100) - (item.fact_price*100))/100).toFixed(2) }}元</view>
					</view>
					<view class="arrive flex">
						<view class="name">{{ '实际到账' }}</view>
						<view class="fee" :style="{color:'#FF7104'}">+{{ item.fact_price }}元</view>
					</view>
					<view class="arrive " v-if="item.content && item.content.reject_content">
						<view class="name">{{ '备注:' }}</view>
						<view class="notice">
							{{item.content.reject_content}}
						</view>
					</view>
					<view class="status flex">
						<view>时间：{{ formatTimeToStr(item.created_at) }}</view>
					</view>
				</view>
				<u-loadmore style="padding: 20rpx 0;" :status="loadStatus" />
			</view>
			
		</view>
	</view>
</template>

<script>
	import {formatTimeToStr} from "@/utils/date";
	export default{
		data(){
			return {
				tabsList:[
					{name: '全部',value:''},
					{name: '兰亭余额提现',value:4}, 
					{name: '兰亭收益提现',value:1},
				],
				tabIndex:0,
				dataList: [],
				pages: {
					total_count: 1,
					page_count: 1,
					pageSize: 20,
					current_page: 1
				},
				loadStatus:'nomore',
				statusText: ['待审核', '待打款', '已打款', '已驳回'],
				cash_type:''
			}
		},
		onLoad(opt){
			console.log('onload',opt);
			this.initData();
			this.getDataList()
		},
		methods:{
			tabChange(e){
				this.tabIndex = e;
				this.cash_type = this.tabsList[e].value;
				this.initData();
				this.getDataList();
			},
			async getDataList(){
				this.loadStatus = 'loading';
				let { current_page, pageSize } = this.pages;
				
				let res = await this.$http.request({
					url: this.$api.plugin.extensions.cash.record,
					method: 'POST',
					data: {page: current_page,limit: pageSize,cash_type:this.cash_type},
					showLoading:true
				});
				this.loadStatus = 'nomore';
				if(res.code !== 0){
					return this.$http.toast(res.msg);
				}
				let { list, pagination } = res.data;
				this.dataList = this.dataList.concat(list);
				this.pages = pagination;
				if (this.pages.current_page < this.pages.page_count) {
					this.loadStatus = 'loadmore';
				}
			},
			initData(){
				this.dataList = [];
				this.pages = {
					total_count: 1,
					page_count: 1,
					pageSize: 20,
					current_page: 1
				};
			},
			
		},
		computed:{
			formatTimeToStr(){
				return value => formatTimeToStr(value * 1000,'yyyy-MM-dd hh:mm')
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
				this.initData();
				this.getDateList();
			}, 1000);
		},
		onReachBottom() {
			let { current_page, page_count } = this.pages;
			if (current_page >= page_count) {
				this.loadStatus = 'nomore';
				return;
			}
			this.pages.current_page++;
			this.getDateList();
		}
	}
</script>

<style lang="scss" scoped>
	.items {
		.item {
			padding: 20rpx;
			border-bottom: 1rpx solid #f2f2f2;
			&:last-child {
				border-bottom: 0;
			}
	
			.status {
				.name {
					color: #434343;
				}
			}
	
			.name {
				flex: 1;
				font-size: 9pt;
				color: #666666;
			}
	
			.desc {
				transform: scale(0.9);
				text-align: center;
				color: #ffffff;
				width: 88rpx;
				height: 36rpx;
				border-radius: 18rpx;
			}
	
			.fee {
				font-size: 9pt;
				font-weight: 600;
			}
		}
	}
</style>